<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新时的一个问题</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <h2>基本信息</h2>
        <button @click="student.age++">年龄+1</button><br>
        <button @click="addSex">添加性别属性，默认是男</button><br>
        <button @click="addFriends">在列表首位添加一个朋友</button><br>
        <button @click="updateFriend">修改第一个朋友名字为’郭老师‘</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="changeHobby">修改第一个爱好为开车</button><br>
 
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友：</h3>
        <ul>
            <li v-for="(f,index) in student.friend" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
 
    </div>


    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                student: {
                    name: '谦儿哥',
                    age: 47,
                    hobby: [
                        '抽烟','喝酒','汤头'
                    ],
                    friend:[
                        {name:'老郭', age:45},
                        {name:'小郭', age:25},
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student, 'sex', '男')
                    this.$set(this.student, 'sex', '男')
                },
                addFriends(){
                    this.student.friend.unshift({name:'张三', 'age':50})
                },
                updateFriend(){
                    this.student.friend[1].name = '郭老师'
                    // this.student.friend[1].age = 42
                },
                addHobby(){
                    this.student.hobby.push('说相声')
                },
                changeHobby(){
                    // this.student.hobby.splice(0, 1, '开车')
                    // Vue.set(this.student.hobby, 0, '开快车')
                    this.$set(this.student.hobby, 0, '开快车')
                }
            }
        })
    </script>

</body>

</html>